{% extends 'web/system.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'sharedSpace.css' %}">
    <link rel="stylesheet" href="{% static 'common.css' %}">
{% endblock css %}

{% block content %}
<!-- Single button -->
<div>
    <div style="display: flex; padding: 10px; align-items: center">
        <div style="position: relative;;">
            <button type="button" class="commonButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                上传我的资源<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" style="max-height: 300px; overflow: scroll;">
                {% for path in myFilePath %}
                <li data-path="{{ path }}" style="padding-left: 10px;" id="select" onclick="upload(this)">{{ path }}</li>
                {% endfor %}
            </ul>
        </div>
        <form class="form" id="search_input" style="height: 40px;">
            <label for="search">
                <input
                    class="input"
                    type="text"
                    required=""
                    placeholder="Search file"
                    id="search"
                />
                <div class="fancy-bg"></div>
                <div class="search">
                    <svg
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                        class="r-14j79pv r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-4wgw6l r-f727ji r-bnwqim r-1plcrui r-lrvibr"
                    >
                        <g>
                            <path
                                d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"
                            ></path>
                        </g>
                    </svg>
                </div>
                <button
                    class="close-btn"
                    type="reset"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd"
                        ></path>
                    </svg>
                </button>
            </label>
        </form>
    </div>
</div>
<div>
    <ol class="breadcrumb">
        <ion-icon name="chevron-back-outline"></ion-icon>
        <ion-icon
            name="chevron-forward-outline"
            style="margin-right: 20px"
        ></ion-icon>
        {% for item in itemLinks %}
            <li><a href={{ item.url }}>{{ item.name }}</a></li>
        {% endfor %}
    </ol>
</div>
<div style="max-height: 80vh; overflow: auto">
{% if not isDetail %}
    <table class="mytable">
        <thead style="width: 100%">
            <tr>
                <!-- key = ['src_ID', 'filename', 'username', 'upload_time', 'size', 'num_stars' ] -->
                <td style="width: 40%;">名称</td>
                <td style="width: 25%;">上传时间</td>
                <td style="width: 12%;">上传人</td>
                <td style="width: 12%;">大小</td>
                <td style="width: 12%;">获赞数</td>
            </tr>
        </thead>
        <tbody>
            {% for file in filesList %}
            <tr>
                <!-- 文件名 -->
                <td  data-path="{{ file.src_path }}" data-type="{{ file.type }}" onclick="check(this)">
                    {% if file.type == '文件夹' %}
                    <ion-icon
                        name="folder-outline"
                        style="margin-right: 5px"
                    ></ion-icon>
                    {% else %}
                    <ion-icon
                        name="document-text-outline"
                        style="margin-right: 5px"
                    ></ion-icon>
                    {% endif %}
                    <span>{{file.filename}}</span>
                </td>
                <!-- 上传时间 -->
                <td>
                    <span class="unhoverspan">{{ file.upload_time }}</span>
                    <span class="hoverspan">
                        <a class="link"><ion-icon name="download-outline" data-userid="{{ file.user_ID }}" data-path="{{ file.src_path }}" onclick="download(this)"></ion-icon></a>
                        <a class="link"><ion-icon name="heart-outline" data-type="{{ file.type }}" onclick="like(this)"></ion-icon></a>
                    </span>
                </td>
                <!-- 上传者 -->
                <td>
                    <span> {{ file.username }}</span>
                </td>
                <!-- 大小 -->
                <td>
                    <span> {{ file.size }}</span>
                </td>
                <!-- 获赞数 -->
                <td style="text-align: center;">
                    <span> {{ file.num_stars }}</span>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% else %}
{% block detailcontent %}{% endblock detailcontent %}
{% endif %}
</div>
{% endblock content %}

{% block script %}
<script>
    // 上传资源
    function upload(node) {
        const src_path = node.dataset.path
        var filesList = '{{ filesList }}'
        if( confirm('这将上传您 ' + src_path + ' 中的所有文件，您确定吗？' )) {
            $.ajax({
                url: "{% url 'sharedUpload' %}",
                type: 'POST',
                data: {
                    src_path: src_path
                },
                success: (res) => {
                    window.location.reload()
                    alert(res)
                }
            })   
        }
    }

    // 查看详情
    function check(node) {
        $.ajax({
            url: "{% url 'getPath' %}",
            type: 'GET',
            data: {
                csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
                src_path: node.dataset.path,
                type: node.dataset.type,
                condition: 'shared'
            },
            success: (res) => {
                window.location.href = res
            }
        })
    }

    // 搜索
    document
        .querySelector('#search_input')
        .addEventListener('submit', function (event) {
            event.preventDefault() // 阻止表单默认的提交行为
            search() // 执行搜索操作或其他操作
        })
    function search() {
        $.ajax({
            url: "{% url 'sharedSearch' %}",
            type: 'GET',
            data: {
                query: $('#search').val()
            },
            success: (res) => {
                location.href = res.href
            }
        })
    }
    // 下载
    function download(node) {
        $.ajax({
            url: "{% url 'sharedDownload' %}",
            type: 'GET',
            data: {
                csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),
                src_path: node.dataset.path,
                user_ID: node.dataset.userid
            },
            xhrFields: {
                responseType: 'blob'
            },
            success: (res) => {
                alert('下载成功')
                url = window.URL.createObjectURL(res)
                const link = document.createElement('a')
                link.href = url
                link.download = 'resource.zip'
                link.click()
                window.URL.revokeObjectURL(url)
            },
            error: (error) => {
                alert('下载失败,请重试')
            }
        })
    }
</script>
{% endblock script %}